<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import axios from "axios";

import chinaMap from "@/assets/map/china.json";

echarts.registerMap("china", chinaMap);

const chartRef = ref();
let chartInstance = null;

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;
  chartInstance = echarts.init(chartRef.value);

  // 注册地图
  echarts.registerMap("china", chinaMap);

  chartInstance.setOption({
    title: {
      text: "访问热力图", // 图表标题内容
      left: "center", // 标题水平居中
      top: 10, // 距离顶部 10px
      textStyle: {
        color: "#fff", // 标题文字颜色为白色
        fontSize: 18, // 字体大小
      },
    },

    tooltip: {
      trigger: "item", // 鼠标移到某个地区时触发
      formatter: "{b}<br/>访问量: {c}", // {b}: 地区名，{c}: 值
    },
    //颜色图例
    visualMap: {
      min: 0, // 最小值
      max: 1000, // 最大值（对应颜色最大）
      left: "left", // 放在左下角
      bottom: 30,
      text: ["高", "低"], // 图例上的文字（从高到低）
      calculable: true, // 允许手动拖动调节（适合交互场景）
      inRange: {
        color: ["#a0d8ef", "#0055a4"], // 从浅蓝 → 深蓝的渐变
      },
      textStyle: {
        color: "#fff", // 图例文字颜色白色（适配深色背景）
      },
    },
    //地图主体配置
    series: [
      {
        name: "访问量", // 图例名称
        type: "map", // 类型是“地图”
        map: "china", // 使用已注册的地图名称（通过 registerMap）
        roam: true, // ✅ 支持缩放和平移（鼠标交互）

        label: {
          show: false, // 默认不显示省份名字
          color: "#fff", // 省份名字颜色
        },

        itemStyle: {
          borderColor: "#0d1b2a", // 每个省份的边框颜色
          areaColor: "#122c49", // 地区默认填充色
        },

        emphasis: {
          label: { show: true }, // 鼠标移上去时显示省份名字
          itemStyle: { areaColor: "#00c2ff" }, // hover 高亮颜色
        },

        data: [], // 初始地图数据为空，后续通过 setOption 更新
      },
    ],
  });
};

// 获取数据并更新图表
const updateMapData = async () => {
  const res = await axios.get("/api/chart/user-map");
  if (res.data.code !== 0) return;
  const mapData = res.data.data;

  chartInstance.setOption({
    series: [
      {
        data: mapData,
      },
    ],
  });
};

onMounted(() => {
  initChart();
  updateMapData();
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
